<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- van-dropdown-menu
                van-dropdown-item
                      v-model:选中项的value值
                      options:[
                      {
                          text:显示的文本,
                          value:"选中该项后的值"
                      }]
                      slot="default/title"
                      该组件的methods上有一方法  toggle(true:显示,false:隐藏)
                      ref:父访问子this
                          1:在子组件标签定义一个ref属性  ref="值"
                          2:this.$refs.值===子组件this
                          this.$refs.值.toggle(false)===关闭弹窗
      -->
      <van-dropdown-menu>
        <van-dropdown-item v-model="value" :options="options" ref="drop">
          <!-- <template #default> -->
          <div style="height:50px;" @click="closeDropdown">
            湖南
          </div>
          <!-- </template> -->
          <template #title>
            <div>
              面试宝典{{value}}
            </div>
          </template>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"
    />

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          value: 'gd',
          options: [
            {
              text: '广东',
              value: 'gd'
            },
            {
              text: '湖北',
              value: 'hb'
            },
            {
              text: '江西',
              value: 'jx'
            }
          ]
        },
        methods: {
          closeDropdown () {
            this.$refs.drop.toggle(false)
          }
        }
      })
    </script>
  </body>
</html>
